<template>
  <div class="body_bgi full relative p_10 bgc_ccc overflow_y_auto scroll_box">
    <div class="w_80_p h_full m_0_auto mt_50 mb_50">
      <div class="w_full h_25_p m_0_auto text_center">
        <img class="h_full fit_cover" src="../assets/image/logo.png" alt="">
      </div>

      <div class="w_full fs_1_5rem mt_20 main_text text_center font_zh ls_3">中蒙国际文化交流</div>
      <div class="w_full fs_1_5rem pv_5 main_text text_center ls_10 font_zh">少儿国际超模大赛</div>

      <div class="w_full border_redius_20 login_form mt_10">
        <van-form @submit="login">
          <van-field
            v-model="loginForm.phone"
            type="number"
            name="username"
            label=""
            label-width="100"
            input-align="center"
            placeholder="请填写账号"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="loginForm.password"
            type="number"
            name="password"
            label=""
            label-width="100"
            input-align="center"
            placeholder="请填写密码"
            :rules="[{ required: true }]"
          />
        </van-form>
      </div>

      <div class="w_full mt_30">
        <van-button 
          round block 
          type="info" size="large" 
          native-type="submit" 
          color="linear-gradient(to bottom, #f7e0cf, #fa964e)"
          @click="login()">登录
        </van-button>
      </div>
    </div>

    <!-- <h5-footer /> -->
  </div>
</template>

<script>
  import H5Footer from '@/components/Footer.vue'

  import { login } from '@/api/index.js'
  import { Toast } from 'vant'

  export default {
    name: 'Login',
    components: { H5Footer },
    data() {
      return {
        loginForm: {
          phone: '',
          password: ''
        }
      }
    },
    
    async mounted() {
                      
    },
    methods: {
      async login() {
        let res = await login(this.loginForm)
        try { 
          if (res.code == 1000 && res.data.token) {
            window.sessionStorage.setItem('token', res.data.token)
            window.sessionStorage.setItem('user', JSON.stringify(res.data.user))

            Toast.success('登录成功！');
            
            let token = window.sessionStorage.getItem('token')
            if (token) {
              this.$router.push('/select-activity')
            }
          } else {
            Toast.fail(res.message);
          }
        } catch (err) {
          console.log('登录失败 : ', err);

          Toast.fail(err);
        }
      }
    }
  }
</script>

<style>
  .login_form > .van-form { border: 1px solid #3a3a3a; border-radius: 10px; }
  .login_form > .van-form > .van-cell {
    height: 50px; 
    line-height: 30px;
    background-color: var(--sub-color) !important;
  }
  .login_form > .van-form > .van-cell::after { left: 0; right: 0; border-bottom: 1px solid #3a3a3a !important; }
  .login_form > .van-form > .van-cell:nth-child(1) {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .login_form > .van-form > .van-cell:nth-child(2) {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }

  .login_form > .van-form > .van-cell > .van-cell__value > .van-field__body > input { color: var(--main-color); }

  .van-button--large { height: 60px; }
  .van-button__text { font-size: 1rem !important; }
</style>